<html lang="en">
<head>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
    <script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>
    <script type='text/javascript'>
        window.onload = function() {
            Formio.builder(document.getElementById('builder')).then(builder => {
                builder.on('saveComponent', evt => {
                    document.getElementById('json-export').value = JSON.stringify(builder.schema, null, 4)
                })
            });
        };

        function importJsonToBuilder(){
            Formio.builder(document.getElementById('builder'), JSON.parse(document.getElementById('json-import').value)).then(builder => {
                builder.on('saveComponent', evt => {
                    document.getElementById('json-export').value = JSON.stringify(builder.schema, null, 4)
                })
            });
        }
    </script>
    <title>Form Builder</title>
</head>
<body>
<div class="col-lg">
    <h1>Form Builder</h1>
    <br>
    <div id='builder' class="col-lg"></div>
</div>
<div class = "col-md-9">
    <hr>
    <label for="json-export">Copy your JSON:</label>
    <br>
    <textArea id="json-export" cols="50" rows="15"></textArea>
    <br>
</div>
<div class = "col-md-9">
    <hr>
    <label for="json-import">Import JSON into Form Builder:</label>
    <br>
    <textArea id="json-import" cols="50" rows="10"></textArea>
    <br>
    <button onclick="importJsonToBuilder()">Import Json</button>
    <br>
</div>
</body>
</html>